<template>
  <div
    ref="containerEl"
    class="flex flex-row flex-wrap items-center lg:block lg:flex-nowrap overflow-hidden"
    :class="{ 'opacity-80': itemOpacity }"
  >
    <div
      v-for="(el, i) in data"
      :key="el[idKey]"
      class="py-2 px-4 mb-2 cursor-pointer mr-2 lg:mr-0 max-w-full relative"
      :class="[
        selectedIndex === i || selectedId === el[idKey] ? 'bg-opacity-10 bg-color-active' : bgCls,
        itemHeight && !hasDes(el) ? 'flex items-center' : '',
        center ? 'flex justify-center' : '',
      ]"
      :style="itemHeight && !hasDes(el) ? { height: itemHeight + 'px' } : {}"
      @click="$emit('select', { el, i })"
      @mouseenter="toggleOper(el, true)"
      @mouseleave="toggleOper(el, false)"
    >
      <div
        class="flex flex-row items-center w-full"
        :class="[
          selectedIndex === i || selectedId === el[idKey] ? 'text-color-active font-semibold' : 'text-color-main',
          hasDes(el) ? 'mb-1' : '',
        ]"
      >
        <div v-if="iconKey" class="mr-2" style="font-size: 0">
          <Icon :type="el[iconKey]" class="!text-2xl" />
        </div>
        <div class="text-ellipsis-1 overflow-hidden" :title="el[titleKey]">
          <span class="align-middle">{{ el[titleKey] }}</span>
        </div>
        <!-- <div class="flex-1 flex flex-row items-center">
          
          
        </div> -->
        <div class="flex-1 whitespace-nowrap">
          <slot name="titleSuffix" :data="el" />
        </div>
        <div v-if="hasOper && el.operVisible && !el.disableOper" class="whitespace-nowrap pl-2" style="font-szie: 0">
          <Icon
            type="icon-bianji"
            class="text-lg mr-2 text-color-secondary active:opacity-60 hover:text-color-active"
            @click.stop="handleEdit(el)"
          />
          <Icon
            type="icon-shanchu"
            class="text-lg text-color-secondary active:opacity-60 hover:text-color-active"
            @click.stop="handleDel(el)"
          />
        </div>
      </div>
      <div v-if="hasDes(el)" class="text-color-secondary text-sm text-ellipsis-2 overflow-hidden">
        {{ el[desKey as string] }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, nextTick, ref, shallowRef, watch } from "vue";
import { TableRecord } from "/@/api/models";

const props = withDefaults(
  defineProps<{
    data: TableRecord[];
    selectedIndex?: number;
    selectedId?: string;
    idKey: string;
    titleKey: string;
    desKey?: string;
    itemOpacity?: boolean;
    center?: boolean;
    iconKey?: string;
    bgCls?: string;
    hasOper?: boolean;
  }>(),
  {
    bgCls: "bg-header",
  }
);
const emits = defineEmits(["select", "edit", "del"]);
const itemHeight = ref(0);
const containerEl = shallowRef<HTMLDivElement>();
watch(
  () => props.data,
  (v) => {
    // nextTick(() => {
    //   if (containerEl.value) {
    //     const divs = containerEl.value.querySelectorAll<HTMLDivElement>("div.cursor-pointer");
    //     divs.forEach((el) => {
    //       const h = el.offsetHeight;
    //       if (h > itemHeight.value) {
    //         itemHeight.value = h;
    //       }
    //     });
    //   }
    // });
  },
  {
    immediate: true,
  }
);
function hasDes(el) {
  return props.desKey && el[props.desKey];
}
function toggleOper(el, visible) {
  el.operVisible = visible;
}
function handleEdit(el) {
  emits("edit", el);
}
function handleDel(el) {
  emits("del", el);
}
</script>
